<template>
  <div class="songsheet-list">
    <div class="songsheet-info" v-for="(item,index) in data" :key="index">
      <div class="songsheet-img">
        <img v-lazy="item.coverImgUrl" alt="">
      </div>

      <div class="songsheet-maininfo">
        <div class="songsheet-name">
          <span>{{ item.name }}</span>
        </div>
        <div class="songsheet-desc">
          <span>{{ item.trackCount }}首 ,</span>
          <span>by{{ item.creator.nickname }}, </span>
          <span>播放{{ formatData(item.playCount) }}万次</span>
        </div>
      </div>
    </div>

    <div class="pagination">
      <van-pagination v-model="currentPage" 
        :total-items="totalCount" 
        :show-page-size="6" 
        :items-per-page="20" 
        force-ellipses
        @change="pageChange">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
      </van-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      data:Array,
      totalCount:Number
    },

    data() {
      return {
        currentPage:1
      }
    },

    methods:{
      pageChange(val){
        this.$emit('pageChange',val);
      },

      formatData(value){
        let result = (value / 10000).toFixed(2);
        return result
      }
    }
  }
</script>

<style scoped>
.songsheet-list{
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 10px;
}

.songsheet-info{
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

.songsheet-img{
  margin: 10px;
}

.songsheet-img img{
  width: 60px;
  height: 60px;
}

.songsheet-name span{
  font-size: 15px;
}

.songsheet-desc span{
  font-size: 11px;
}
</style>